<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/admin.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>

</head>
<body>
<form class="layui-form layui-top-win" lay-filter="user">
    <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">学号</label>
        <div class="layui-input-block">
            <input type="text" name="stuId" placeholder="请输入学号" onchange="checkStuNo(this)"
                   lay-verify="required|number" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">成绩</label>
        <div class="layui-input-block">
            <input type="text" name="mark" placeholder="请输入成绩" lay-verify="required|number" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">课程名</label>
        <div class="layui-input-block">
            <select name="courseId" lay-verify="required|number" style="height: 100px" class="course" id="course-select">
                <option value=""></option>
            </select>
        </div>
    </div>

</form>

<script>
    let form = false;
    layui.use(['form'], function () {
        form = layui.form;
        let $ = layui.jquery;
        form.on('submit', function (data) {
            axios.post("/teacher/mark/add", data.field).then(ret => {
                if (ret.data.status) {
                    // 刷新父组件的表格
                    parent.layui.table.reload("job")
                    parent.layer.msg("成绩录入成功")
                    // 关闭父组件的弹出层
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else if (ret.data.code === 20000) {
                    // 获取错误消息
                    for (let key in ret.data.error) {
                        layer.msg(ret.data.error[key])
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    function checkStuNo(tag) {
        let val = tag.value;
        let selectTag = document.querySelector("#course-select")
        if (val.trim() == "") {
            selectTag.innerHTML = "" ;
            return
        }
        // 根据学号查询 对用学生 选课信息
        axios.get("${pageContext.request.contextPath}/teacher/mark/" + val).then(ret => {
            if (ret.data.status) {
                // 获取对应的选课信息
                let courseList = ret.data.list;

                let selHtml = '<option value=""></option>';
                for (let index in courseList) {
                    let course = courseList[index];
                    selHtml += `<option value="\${course.id}">\${course.name}</option>`
                }
                selectTag.innerHTML = selHtml
                form.render('select');
            }else{
                layer.msg(ret.data.message)
            }
        })
    }

</script>

<style>
    dl.layui-anim-upbit {
        max-height: 150px !important;
    }
</style>
</body>
</html>
